<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-select v-model="conditions.province" placeholder="请选择省" size="small" @change="cityFn">
          <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="conditions.city" placeholder="请选择市" size="small" @change="areaFn">
          <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="conditions.area" placeholder="请选择区" size="small">
          <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="3"><el-input v-model="conditions.school_title" placeholder="请输入学校名称关键字" size="small"></el-input></el-col>
      <el-col :span="3"><el-input v-model="conditions.plan_title" placeholder="请输入帐号" size="small"></el-input></el-col>
      <el-col :span="3"><el-input v-model="conditions.title" placeholder="请输入学校姓名" size="small"></el-input></el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <el-row v-if="this.menuList.includes('storeShoolEval')" class="btnBox">
      <el-col :span="2" :offset="20"><el-button type="primary" size="small">添加危机</el-button></el-col>
      <el-col :span="2"><el-button size="small">导出</el-button></el-col>
    </el-row>
    <div class="table">
      <el-table :data="tableData" :menuList="menuList" v-loading="tableConfig.load" :style="tableConfig.style" :max-height="tableConfig.maxHeight" :border=tableConfig.border :size="tableConfig.size">
        <el-table-column v-if="tableConfig.selection === true" type="selection" width="55"> </el-table-column>
          <template v-for="(item, index) of tableConfig.config">
            <el-table-column v-if="item.id === 'operation'" :key="index" :prop="item.id" :label="item.name" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
              <template slot-scope="scope">
                <el-button v-if="scope.row.type_title === ''" @click="examine('supplement', scope.row, scope.$index)" type="text" size="small">补充信息</el-button>
                <el-button v-if="scope.row.type_title !== ''" @click="examine('management', scope.row, scope.$index)" type="text" size="small">危机管理</el-button>
              </template>
            </el-table-column>
            <el-table-column v-else :label="item.name" :key="index" :prop="item.id" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :type="item.type"></el-table-column>
          </template>
        </el-table>
    </div>
    <div class="page">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </div>
    <!-- <add-plan :isAddPlan="this.isAddPlan" @noAddPlan="noAddPlan"></add-plan> -->
  </div>
</template>
<script>
import {APISCHOOLWHOLEREGION, APICRISISGETLIST} from '@/common/api.js'
// import addPlan from './components/addPlan.vue'
export default {
  // components: {addPlan},
  data () {
    return {
      menuList: [],
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      conditions: {
        province: '',
        city: '',
        area: '',
        title: '',
        school_title: '',
        plan_title: ''
      },
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: false,
        border: true,
        config: [
          {id: 'real_name', name: '姓名'},
          {id: 'sex_title', name: '性别'},
          {id: 'school_title', name: '学校名称'},
          {id: 'province', name: '省份'},
          {id: 'city', name: '城市'},
          {id: 'area', name: '区/县'},
          {id: 'section_title', name: '学段'},
          {id: 'grade_title', name: '年级'},
          {id: 'class_title', name: '班级'},
          {id: 'type_title', name: '危机类型'},
          {id: 'influence_range_title', name: '影响范围'},
          {id: 'mode_title', name: '预警方式'},
          {id: 'status_title', name: '状态'},
          {id: 'number', name: '预警次数'},
          {id: 'operation', name: '操作'}
        ]
      },
      tableData: [],
      id: '',
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    this.getWholeRegion()
    this.tableList()
  },
  methods: {
    getWholeRegion () {
      APISCHOOLWHOLEREGION().then((res) => {
        this.provinceOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    cityFn () {
      this.conditions.city = ''
      this.conditions.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.conditions.province
      }).then((res) => {
        this.cityOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    areaFn () {
      this.conditions.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.conditions.city
      }).then((res) => {
        this.areaOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    tableList () {
      APICRISISGETLIST({
        province: this.conditions.province,
        city: this.conditions.city,
        area: this.conditions.area,
        title: this.conditions.title,
        school_title: this.conditions.school_title,
        plan_title: this.conditions.plan_title,
        page: this.page
      }).then((res) => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
        } else {
          this.tableData = []
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    examine (id, val) {
      if (id === 'supplement') { // 补充信息
        this.$router.push({path: '/supplement', query: {id: val.id, name: val.real_name, uid: val.uid, school_id: val.school_id}})
      } else if (id === 'management') { // 危机管理
        this.$router.push({path: '/studentCrisis', query: {id: val.id}})
      }
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    }
  }
}
</script>
